<template>
  <div class="home">
    <div class="container">
      <building-floors :titles="titles" :sections="sections" />
      <headers></headers>
      <swiper
        style="width: 100%; height: 450px; margin-bottom: 10px"
        :pcBannerList="pcBannerList"
      ></swiper>
      <div class="section" ref="temp_section">
        <new-goods :newGoodsList="views[0]"></new-goods>
        <hot-sell-list :hotSellList="views[1]"></hot-sell-list>
        <must-buy-goods :mustBuyGoods="views[2]"></must-buy-goods>
        <trend-digital :trendDigital="views[3]"></trend-digital>
        <life-beauty :lifeBeauty="views[4]"></life-beauty>
        <three-meals :threeMeals="views[5]"></three-meals>
        <four-seasons :fourSeasons="views[6]"></four-seasons>
      </div>
    </div>
    <footers></footers>
  </div>
</template>

<script>
// @ is an alias to /src
import Headers from "@/components/header.vue";
import BuildingFloors from "@/components/buildingFloors.vue";
import Swiper from "@/components/home/swiper.vue";
import Footers from "@/components/footer.vue";
import { getPcPlateContent } from "@/api/index";
import newGoods from "@/components/home/newGoods.vue";
import HotSellList from "@/components/home/hotSellList.vue";
import MustBuyGoods from "@/components/home/mustBuyGoods.vue";
import TrendDigital from "@/components/home/trendDigital.vue";
import LifeBeauty from "@/components/home/lifeBeauty.vue";
import ThreeMeals from "@/components/home/threeMeals.vue";
import FourSeasons from "@/components/home/fourSeasons.vue";

export default {
  name: "HomeView",
  mounted() {
    console.log("111");
          window.addEventListener("load",()=>{  
                      
              try {
                setTimeout(()=>{
                   this.sections =this.$refs["temp_section"].children;
              },3000)
              } catch (error) {
                console.log(error);
                
              }
             
          })

        
   
  },
  async created() {
    const {
      result: { pcBannerList, views },
    } = await getPcPlateContent();
    this.pcBannerList = pcBannerList;

    views.forEach((item, index) => {
      this.$set(this.titles, index, item.name);
    });

    this.views = [...views];

  },
  watch:{
    'views':{
      handler(newVal){

          this.sections =[...this.$refs["temp_section"].children];
          console.dir("111", this.sections.length);
      },
      deep:true
    }
  },
  name: "HomeView",
  components: {
    BuildingFloors,
    Swiper,
    Headers,
    Footers,
    newGoods,
    HotSellList,
    MustBuyGoods,
    TrendDigital,
    LifeBeauty,
    ThreeMeals,
    FourSeasons,
  },
  data() {
    return {
      list: [800, 600, 700, 900, 880, 500, 600],
      titles: ["1楼", "2楼", "3楼", "4楼", "5楼"],
      pcBannerList: [],
      views: [],
      sections: "",
    };
  },
};
</script>
